<template>
    <div>
        <!-- //android -->
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <span>Android</span>
            <el-divider></el-divider>
            <el-form :model="rulerForm" ref="rulerForm" :rules="rules" label-width="80px" :inline="false" size="normal">
                <el-form-item label="标题">
                    <el-input v-model="rulerForm.title"></el-input>
                </el-form-item>
                <el-form-item label="描述 ">
                    <el-input v-model="rulerForm.description"></el-input>
                </el-form-item>
                <el-form-item label="版本号">
                    <el-input v-model="rulerForm.version"></el-input>
                </el-form-item>
                <el-form-item label="版本名称">
                    <el-input v-model="rulerForm.versionName"></el-input>
                </el-form-item>
                <el-form-item label="是否强制更新" size="normal">
                    <el-switch v-model="rulerForm.forcibly" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="更新地址" size="normal">
                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                        :on-change="handleChange" :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传apk文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('rulerForm')">保存</el-button>
                    <el-button @click="remove">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- ios -->
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <span>ios</span>
            <el-divider></el-divider>
            <el-form :model="rulerForm1" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
                <el-form-item label="标题">
                    <el-input v-model="rulerForm1.title"></el-input>
                </el-form-item>
                <el-form-item label="描述 ">
                    <el-input v-model="rulerForm1.description"></el-input>
                </el-form-item>
                <el-form-item label="版本号">
                    <el-input v-model="rulerForm1.version"></el-input>
                </el-form-item>
                <el-form-item label="版本名称">
                    <el-input v-model="rulerForm1.versionName"></el-input>
                </el-form-item>
                <el-form-item label="是否强制更新" size="normal">
                    <el-switch v-model="rulerForm1.forcibly" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm2('rulerForm')">保存</el-button>
                    <el-button @click="removeIos">重置</el-button>
                </el-form-item>
            </el-form>

        </el-card>

    </div>
</template>

<script>
import { reqGetList, reqUpdateOne } from '@/api/versionManage'
export default {
    name: '',
    data() {
        return {
            value: true,
            fileList: [{ name: '', url: '' }],
            rulerForm: {
                client: "",
                date: "",
                description: "",
                forcibly: false,
                id: "",
                title: "",
                url: "",
                version: '',
                versionName: "",
                __v: '',
                _id: "",
            },
            rulerForm1: {
                client: "",
                date: "",
                description: "",
                forcibly: false,
                id: "",
                title: "",
                url: "",
                version: '',
                versionName: "",
                __v: '',
                _id: "",
            },
            rules: {
                title: [
                    { required: true, message: '请输入 标题', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入 描述', trigger: 'blur' }
                ],
                version: [
                    { required: true, message: '请输入 版本号', trigger: 'blur' }
                ],
                versionName: [
                    { required: true, message: '请输入 版本名称', trigger: 'blur' }
                ],
            }
        }
    },
    mounted() {
        //挂载页面数据
        this.getList()
    },
    methods: {
        //请求andriod页面数据
        async getList() {
            let result = await reqGetList({ client: 0 })
            result.data.docs.forEach((item) => {
                this.rulerForm = { ...item }
                // this.rulerForm.title = item.title
                // this.rulerForm.description = item.description
                // this.rulerForm.forcibly = item.forcibly
                // this.rulerForm.version = item.version
                // this.rulerForm.versionName = item.versionName
                // this.rulerForm.client = item.client
                // this.rulerForm.date = item.date
                // this.rulerForm.id = item.id
                // this.rulerForm.url = item.url
                // this.rulerForm.__v = item.__v
                // this.rulerForm._id = item._id
            });

            let result1 = await reqGetList({ client: 1 })
            result1.data.docs.forEach((item1) => {
                this.rulerForm1 = { ...item1 }
                // this.rulerForm1.title = item1.title
                // this.rulerForm1.description = item1.description
                // this.rulerForm1.forcibly = item1.forcibly
                // this.rulerForm1.version = item1.version
                // this.rulerForm1.versionName = item1.versionName
                // this.rulerForm1.client = item1.client
                // this.rulerForm1.date = item1.date
                // this.rulerForm1.id = item1.id
                // this.rulerForm1.url = item1.url
                // this.rulerForm1.__v = item1.__v
                // this.rulerForm1._id = item1._id
            });

        },
        //保存
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let result = await reqUpdateOne({ ...this.rulerForm })
                    if (result.status == 200) {
                        this.$message({ type: 'success', message: '更新成功' })
                    }
                    //挂载页面数据
                    this.getList()
                    // alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        submitForm2(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let result = await reqUpdateOne({ ...this.rulerForm1 })
                    if (result.status == 200) {
                        this.$message({ type: 'success', message: '更新成功' })
                    }
                    //挂载页面数据
                    this.getList()
                    // alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        remove() {
             this.rulerForm={}
        },
        removeIos() {
            this.rulerForm1={}
        },
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-3);
        }
    }

}
</script>

<style>
</style>